<template>
    <div class="order-detail-container">
        <!-- 店铺信息区域 -->
        <div class="store-info">
            <div class="store-title">
                <span class="store-name">{{ orderData.storeName }}</span>
                <van-icon name="arrow" class="arrow-icon" @click="handleStoreDetail" />
                <van-icon name="phone" class="phone-icon" @click="callStore" />
            </div>
            <div class="store-address">
                {{ orderData.distance }} | {{ orderData.address }}
            </div>
        </div>

        <!-- 商品信息区域 -->
        <div class="goods-section">
            <div class="goods-item">
                <img :src="orderData.goodsImg" class="goods-img" alt="商品图" />
                <div class="goods-desc">
                    <div class="goods-name">{{ orderData.goodsName }}</div>
                    <div class="goods-spec">{{ orderData.goodsSpec }}</div>
                    <div class="goods-count">x {{ orderData.goodsCount }}</div>
                </div>
                <div class="goods-price">¥{{ orderData.goodsPrice }}</div>
            </div>
            <!-- 优惠券 -->
            <div class="coupon">
                <span>优惠券</span>
                <span class="coupon-amount">-¥{{ orderData.couponAmount }}</span>
                <span class="coupon-detail" @click="showCouponDetail">详情</span>
            </div>
            <div class="total">
                共{{ orderData.totalCount }}件，合计 ¥{{ orderData.totalPrice }}
                <div class="reward">
                    奖励{{ orderData.snowCoin }}雪王币 +{{ orderData.honeyValue }}甜蜜值({{ orderData.rewardDesc }})
                </div>
            </div>
        </div>

        <!-- 订单信息区域 -->
        <div class="order-info">
            <div class="order-item">
                <span>下单时间</span>
                <span>{{ orderData.orderTime }}</span>
            </div>
            <div class="order-item">
                <span>订单编号</span>
                <span>{{ orderData.orderNo }}</span>
                <van-button round type="primary" size="small" @click="copyOrderNo">复制</van-button>
            </div>
            <div class="order-item">
                <span>取餐码</span>
                <span>{{ orderData.pickupCode }}</span>
            </div>
            <div class="order-item">
                <span>是否打包</span>
                <span>{{ orderData.isPack }}</span>
            </div>
        </div>

        <!-- 再来一单按钮 -->
        <div class="again-btn-wrap">
            <van-button round type="info" class="again-btn" @click="handleAgainOrder">再来一单</van-button>
        </div>

        <!-- 错误提示 -->
        <div v-if="errorMsg" class="error-message">{{ errorMsg }}</div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Toast, Icon, Button } from 'vant';
import 'vant/lib/index.css';

// 订单数据
const orderData = ref({
    storeName: '蜜雪冰城 (905807火车站西广...)',
    distance: '直线距离3.0km',
    address: '河南省郑州市二七区火车站西广场南侧 (A5-1)',
    goodsImg: 'http://sz4rr0buo.hn-bkt.clouddn.com/%E8%8A%92%E6%9E%9C%E5%A5%B6%E6%98%94.png',
    goodsName: '百香芒芒(升级版)',
    goodsSpec: '少冰/正常糖',
    goodsCount: 1,
    goodsPrice: 8,
    couponAmount: 0.96,
    totalCount: 1,
    totalPrice: 7.04,
    snowCoin: 71,
    honeyValue: 8,
    rewardDesc: '1分钟后发放奖励',
    orderTime: '2024-06-29 19:26:13',
    orderNo: '1807012690351235074',
    pickupCode: '2190',
    isPack: '不打包'
});

// 错误信息
const errorMsg = ref('');

// 接口：获取订单详情（包含所有信息）
const fetchOrderDetails = async (orderId) => {
    try {
        // 模拟接口返回（可删除，换成真实请求）
        return new Promise(resolve => {
            setTimeout(() => {
                resolve(orderData.value);
            }, 800);
        });
    } catch (error) {
        console.error('获取订单详情失败:', error);
        errorMsg.value = '订单信息加载失败，请稍后重试';
        return null;
    }
};

// 查看店铺详情（可扩展接口）
const handleStoreDetail = () => {
    Toast.info('查看店铺详情接口待实现，可在此扩展逻辑');
};

// 拨打电话
const callStore = () => {
    Toast.info('拨打电话接口待实现，可在此调用拨号逻辑');
};

// 复制订单编号
const copyOrderNo = () => {
    navigator.clipboard.writeText(orderData.value.orderNo).then(() => {
        Toast.success('订单编号复制成功');
    }).catch((err) => {
        Toast.error('复制失败，请手动复制');
        console.error(err);
    });
};

// 查看优惠券详情（可扩展接口）
const showCouponDetail = () => {
    Toast.info('优惠券详情接口待实现，可在此扩展逻辑');
};

// 再来一单
const handleAgainOrder = () => {
    Toast.info('再来一单接口待实现，可在此调用下单逻辑');
};

onMounted(async () => {
    const orderId = '123456';
    const data = await fetchOrderDetails(orderId);
    if (data) {
        orderData.value = data;
    }
});
</script>

<style scoped>
/* 让页面容器占满视口，内容可滚动 */
.order-detail-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* 占满视口高度 */
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    /* 浅灰色背景更柔和 */
}

/* 店铺信息区域 */
.store-info {
    background: #fff;
    padding: 16px;
    border-radius: 8px;
    margin: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    /* 轻微阴影增强层次 */
}

.store-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.store-name {
    font-size: 17px;
    font-weight: 600;
    color: #333;
}

.arrow-icon,
.phone-icon {
    font-size: 20px;
    color: #999;
    margin-left: 12px;
    cursor: pointer;
    transition: color 0.3s;
}

.arrow-icon:hover,
.phone-icon:hover {
    color: #ff6d28;
    /*  hover 时变色突出交互 */
}

.store-address {
    font-size: 14px;
    color: #666;
    margin-top: 8px;
    line-height: 1.4;
}

/* 商品信息区域 */
.goods-section {
    background: #fff;
    margin: 0 12px 12px;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.goods-item {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.goods-img {
    width: 72px;
    height: 72px;
    border-radius: 6px;
    margin-right: 12px;
}

.goods-desc {
    flex: 1;
}

.goods-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}

.goods-spec {
    font-size: 14px;
    color: #666;
    margin-bottom: 4px;
}

.goods-count {
    font-size: 14px;
    color: #999;
}

.goods-price {
    font-size: 16px;
    color: #ff4d4f;
    font-weight: 600;
}

/* 优惠券 */
.coupon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding: 12px 0;
    border-top: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
}

.coupon-amount {
    color: #ff4d4f;
    font-weight: 600;
}

.coupon-detail {
    color: #ff6d28;
    cursor: pointer;
    font-size: 14px;
    transition: color 0.3s;
}

.coupon-detail:hover {
    color: #e85a19;
}

/* 合计信息 */
.total {
    margin-top: 12px;
    text-align: right;
    font-size: 15px;
    color: #333;
}

.reward {
    font-size: 13px;
    color: #999;
    margin-top: 6px;
    text-align: right;
}

/* 订单信息区域 */
.order-info {
    background: #fff;
    margin: 0 12px 12px;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
    color: #666;
}

/* 再来一单按钮 */
.again-btn-wrap {
    display: flex;
    justify-content: center;
    margin: 12px;
}

.again-btn {
    width: 100%;
    max-width: 200px;
    font-size: 16px;
    background: #ff6d28;
    border-color: #ff6d28;
    transition: all 0.3s;
}

.again-btn:hover {
    background: #e85a19;
    border-color: #e85a19;
}

/* 错误提示 */
.error-message {
    color: #ff4d4f;
    font-size: 14px;
    padding: 14px;
    text-align: center;
    background-color: #fff1f0;
    border-radius: 6px;
    margin: 0 12px 12px;
}
</style>